<!--
消息订阅与发布（pubsub）
1. 一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。
2. 使用步骤：
    - 1. 安装pubsub：```npm i pubsub-js```
    - 2. 引入: ```import pubsub from 'pubsub-js'```
    - 3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的<span style="color:red">回调留在A组件自身。</span>
       ```
       methods(){
         demo(data){......}
       }
       ......
       mounted() {
         this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
       }
       ```
    - 4. 提供数据：```pubsub.publish('xxx',数据)```
    - 5. 最好在beforeDestroy钩子中，用```PubSub.unsubscribe(pid)```去<span style="color:red">取消订阅。</span>
-->

<template>
  <!-- 组件的结构。其中template标签是不参与结构编译的 -->
  <div class="demo">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <hr>
  </div>
</template>

<script>
// 组件交互相关的代码（数据、方法等等）。
// 引入发布订阅的pubsub-js
import pubsub from 'pubsub-js';

// // 暴漏方式一：分别暴露
// export const student = Vue.extend({
//   data() {
//     return {
//       student: {
//         name: '尚硅谷',
//         age: '北京市昌平区宏福科技园',
//       }
//     }
//   },
//   methods: {
//     showName() {
//       alert(this.student.name);
//     }
//   }
// });


// const student = Vue.extend({
//   data() {
//     return {
//       student: {
//         name: '尚硅谷',
//         age: '北京市昌平区宏福科技园',
//       }
//     }
//   },
//   methods: {
//     showName() {
//       alert(this.student.name);
//     }
//   }
// });
// 暴漏方式二：统一暴露
// export {student};


// 暴露方式三：默认暴露
// export default {student};
// 如果是暴露出一个对象的话，就直接省略花括号{}
// export default student;


// 直接使用默认暴露的话，可以省略 student 变量定义
// export default Vue.extend({
//   data() {
//     return {
//       student: {
//         name: '尚硅谷',
//         age: '北京市昌平区宏福科技园',
//       }
//     }
//   },
//   methods: {
//     showName() {
//       alert(this.student.name);
//     }
//   }
// });

// 其中可以省略Vue.extend()
export default {
  name: 'School', // 定义默认的组件名称，最好和组件的名称保持一致性
  data() {
    return {
      msg: '我是尚硅谷的一个学习Vue的学生！',
      // 通过外部传参的形式获取到真实的数据
      name: '尚硅谷',
      address: '北京市昌平区宏福科技园',
    }
  },
  mounted() {
    // 给Vue上的x绑定了hello事件，而x就是一个Vue实例上的傀儡
    // this.x.$on('hello', data => {
    //   console.log('我是School组件，收到了数据，data：', data)
    // });

    // // 使用$bus替换上面的x
    // this.$bus.$on('hello', data => {
    //   console.log('我是School组件，收到了数据，data：', data)
    // });

    // 使用pubsub-js发布订阅的功能
    // this.pubId = pubsub.subscribe('hello', function (msgName, data) {
    //   console.log('有人发布了hello消息，hello消息的回调执行了', msgName, data);
    // });

    // 如果使用箭头函数的话，里面的this就是vc，否则是 underfined，或者调用方法method里面的方法。
    this.pubId = pubsub.subscribe('hello', (msgName, data) => {
      console.log('有人发布了hello消息，hello消息的回调执行了', msgName, data);
    });
  },
  // // 在组件结束之前销毁该全局事件总线hello
  beforeDestroy() {
    // 必须传入全局事件总线的名称
    // this.$bus.$off('hello');

    // 组件销毁的时候，取消发布订阅
    pubsub.unsubscribe(this.pubId);
  }
};
</script>

<style scoped>
/* 组件的样式 */
.demo {
  background: #42b983;
  padding: 5px;
}
</style>


